<template>
  <div id="app">
    {{msg}}
    <HelloWorld/>
    <router-link to="/home">主页</router-link>
    <router-link to="/news">新闻</router-link>
    <div>
      <keep-alive>
          <router-view></router-view>
      </keep-alive>
    </div>
    <hr>
    <button v-on:click="send">发送ajax请求</button>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to itany'
      }
    },
    mounted () {
      console.log(this.$route)
    },
    watch: {
      $route: function (newValue, oldValue) {
        console.log('路由发生变化,跳转到：' + newValue.path)
      }
    },
    methods: {
      send () {
        axios.get('http://api.github.com/users/tangyang8942')
          .then(resp => {
            console.log(resp.data)
          }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  #nav {
    padding: 30px;
  }

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }
</style>
